<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 / 注册 - AI Chatroom</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background: #0b0f19; color: #e5e7eb; display: grid; place-items: center; min-height: 100vh; }
        .card { width: 520px; max-width: calc(100% - 32px); background: #0f172a; border: 1px solid #1f2937; border-radius: 12px; padding: 20px; }
        .tabs { display: flex; gap: 8px; margin-bottom: 12px; }
        .tab { flex: 1; text-align: center; padding: 10px 12px; border: 1px solid #1f2937; border-radius: 8px; background: #0b1220; cursor: pointer; }
        .tab.active { background: #22c55e; color: #051b0d; font-weight: 700; border-color: #16a34a; }
        .field { display: grid; gap: 6px; margin: 10px 0; }
        .field label { color: #9ca3af; font-size: 13px; }
        .input { background: #0b1220; color: #e5e7eb; border: 1px solid #1f2937; border-radius: 8px; padding: 10px 12px; }
        .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
        .btn { background: #111827; color: #e5e7eb; border: 1px solid #1f2937; padding: 10px 14px; border-radius: 8px; cursor: pointer; }
        .btn.primary { background: #22c55e; color: #051b0d; font-weight: 700; border-color: #16a34a; }
        .error { color: #ef4444; font-size: 13px; margin-top: 6px; min-height: 18px; }
        .hint { color: #9ca3af; font-size: 12px; margin-top: 10px; }
        @media (max-width: 600px) {
            body { padding: 12px; }
            .card { padding: 16px; border-radius: 10px; }
            .tabs { gap: 6px; }
            .tab { padding: 10px; font-size: 14px; }
            .input { padding: 12px; font-size: 16px; }
            .btn { width: 100%; padding: 12px 14px; font-size: 16px; }
            .row { flex-direction: column; gap: 10px; }
        }
    </style>
</head>
<body>
    <div class="card">
        <div style="display:flex; align-items:center; justify-content: space-between; margin-bottom: 10px;">
            <div style="display:flex; align-items:center; gap:10px">
                <div style="width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e"></div>
                <strong>AI Chatroom</strong>
            </div>
            <a href="index.html" style="font-size:13px; color:#9ca3af; text-decoration: none;">返回首页</a>
        </div>
        <div class="tabs">
            <div id="tabLogin" class="tab active">登录</div>
            <div id="tabRegister" class="tab">注册</div>
        </div>

        <div id="panelLogin">
            <div class="field">
                <label>用户名</label>
                <input id="loginUser" class="input" placeholder="username">
            </div>
            <div class="field">
                <label>密码</label>
                <input id="loginPass" class="input" type="password" placeholder="password">
            </div>
            <div id="loginError" class="error"></div>
            <div class="row">
                <button id="doLogin" class="btn primary">登录</button>
            </div>
        </div>

        <div id="panelRegister" style="display:none">
            <div class="field">
                <label>用户名</label>
                <input id="regUser" class="input" placeholder="username">
            </div>
            <div class="field">
                <label>密码</label>
                <input id="regPass" class="input" type="password" placeholder="password">
            </div>
            <div class="field">
                <label>确认密码</label>
                <input id="regPass2" class="input" type="password" placeholder="confirm password">
            </div>
            <div id="registerError" class="error"></div>
            <div class="row">
                <button id="doRegister" class="btn primary">注册</button>
            </div>
            <div class="hint">注册成功后将自动跳转到登录。</div>
        </div>
    </div>

    <script>
        function qs(key){ const u=new URL(location.href); return u.searchParams.get(key)||''; }
        function redirectAfterLogin(){ const to = qs('redirect') || 'index.html'; location.href = to; }
        function setAuth(username, token, userId){ localStorage.setItem('username', username||''); localStorage.setItem('token', token||''); if(userId){ localStorage.setItem('userId', String(userId)); } }

        // tabs
        const tabLogin = document.getElementById('tabLogin');
        const tabRegister = document.getElementById('tabRegister');
        const panelLogin = document.getElementById('panelLogin');
        const panelRegister = document.getElementById('panelRegister');
        tabLogin.onclick = ()=>{ tabLogin.classList.add('active'); tabRegister.classList.remove('active'); panelLogin.style.display=''; panelRegister.style.display='none'; };
        tabRegister.onclick = ()=>{ tabRegister.classList.add('active'); tabLogin.classList.remove('active'); panelRegister.style.display=''; panelLogin.style.display='none'; };

        // login
        document.getElementById('doLogin').addEventListener('click', async ()=>{
            const username = document.getElementById('loginUser').value.trim();
            const password = document.getElementById('loginPass').value.trim();
            const err = document.getElementById('loginError'); err.textContent='';
            try {
                const resp = await fetch('/user/login', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ username, password }) });
                if (!resp.ok) throw new Error('登录失败');
                const data = await resp.json();
                if (!data || !data.token) throw new Error('未返回 token');
                setAuth(data.username || username, data.token, data.id);
                redirectAfterLogin();
            } catch(e){ err.textContent = e.message; }
        });

        // register
        document.getElementById('doRegister').addEventListener('click', async ()=>{
            const username = document.getElementById('regUser').value.trim();
            const password = document.getElementById('regPass').value.trim();
            const confirmPassword = document.getElementById('regPass2').value.trim();
            const err = document.getElementById('registerError'); err.textContent='';
            if (!username || !password) { err.textContent = '用户名和密码不能为空'; return; }
            if (password.length < 6) { err.textContent = '密码长度至少6位'; return; }
            if (password !== confirmPassword) { err.textContent = '两次输入的密码不一致'; return; }
            try {
                const resp = await fetch('/user/register', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ username, password, confirmPassword }) });
                if (!resp.ok) throw new Error('注册请求失败');
                const result = await resp.json();
                if (result && Number(result.code) === 200) {
                    // 切回登录并预填
                    tabLogin.click();
                    document.getElementById('loginUser').value = username;
                    document.getElementById('loginPass').focus();
                    const er = document.getElementById('loginError'); er.textContent = '注册成功，请登录';
                } else {
                    throw new Error(result && result.message ? result.message : '注册失败');
                }
            } catch(e){ err.textContent = e.message; }
        });
    </script>
</body>
</html>

